<template>
  <div>
    <img src="@/assets/1(1).jpg" alt="" />
    <img src="@/assets/1(2).jpg" alt="" />
    <img src="@/assets/1(3).jpg" alt="" />
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>
</template>

<script setup lang="ts">
//一.ts基本类型定义
//1.string类型
let str: string = "aa";
str = "33";
console.log(16, str);

//2.number 类型
let nums: number = 33;
console.log(nums);

//3.boolean 类型
let b2: boolean = true;
b2 = false;
console.log(b2);

//数组
// let arr: Array<String> = ["1","2"]
let arr: number[] = [1, 2, 3];
console.log(arr);

//元组
let arr1: [string, Boolean] = ["1", false];
console.log(arr1[0]);

// Object类型-对象类型，也就是除number，string，boolean，symbol，null或undefined之外的类型
function create(obj: object) {
  console.log(obj);
}
create([1, 2, 3, 5, 6]); //[1,2,3,5,6]
create({ key: 1 }); //{key:1}

// enum 枚举
enum Color {
  red,
  yellow,
  blue,
  green,
}
let col = Color.green;
console.log("枚举", col); //默认情况下，索引从0开始

//也可自定义编号
enum Color2 {
  yello = 2,
  pink,
  red,
}
let c = Color2.pink;
console.log(c);

enum Color3 {
  red = 2,
  yellow,
  blue,
}
let d = Color3[3];
console.log(d);

function getData1<T>(arg1: T): T {
  return arg1;
}
//在调用时传任何类型都可以
console.log("泛型", getData1("89"));
console.log(getData1(99999));
console.log(getData1(false));

// 泛型也可以传入多个值
function swap<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]];
}

console.log(swap(["string", 123]));

let str3 = "类型推论";
console.log("类型推论", str3);
// 3.2 推论any类型。如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：
let str4;
str4 = "a";
str4 = 4; //输出最后一个
console.log(str4);

// 4.1 联合类型-联合类型表示取值可以为多种类型中的一种，使用 `|` 分隔每个类型
let numStr: string | number;
numStr = "seven";
// numStr = 2;
// numStr=true //以下是错误的,因为上面已经定义过类型，不能是其他类型
console.log("联合类型", numStr);

// 4.2 访问联合类型的属性或方法-当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们**只能访问此联合类型的所有类型里共有的属性或方法
function getNumStr(num2: string | number) {
  // return num2.length  //报错
  return num2.toString(); //访问共有属性
}
console.log(129, getNumStr("22"));

interface Iuser {
  name: string;
  age: number;
  sex?: string;
}
//1.2接口使用-增加变量和减少变量是不允许的，改变属性的数据类型是不允许的；可见，赋值的时候，**变量的形状必须和接口的形状保持一致
let tom: Iuser = {
  name: "接口",
  age: 15, //如果只给一个，会报错缺少属性。类型必须得跟定义的类型一致
  // sex:"20000", //类型与定义的保持一致，不能多，也不能少属性
};

console.log("tom", tom);
</script>

<style lang="scss" scoped>
img {
  width: 300px;
  height: 300px;
}
</style>